<script setup>
import { ref, reactive } from "vue";
import * as testApi from "@/api/testApi.js";
import * as topicApi from "@/api/topicApi.js";
import { ElMessage } from "element-plus";
const testRef = reactive({
  c_id: "",
  title: "综合测试",
  desc: "这是一个描述",
  start_time: 1702987200000,
  exam_time_long: 120,
  stop_time: 1703159166000,
  questions: []
});

const isOpen = ref(false);

let questions = ref([]);
fetchQuestions();

// 获取 试题
async function fetchQuestions() {
  if (questions.value.length === 0) {
    const { data } = await topicApi.findByPage();
    questions.value = data.data;
  }
}

// 打开 试题选择面板
function openSelectQuestionPan() {
  isOpen.value = true;
  fetchQuestions();
}

// 从试卷中试卷题目
function handleAddQuestion(id) {
  testRef.questions.push(id);
}
// 从试卷中删除试卷题目
function handleDelete(id) {
  const index = testRef.questions.indexOf(id)
  testRef.questions.splice(index, 1);
}

// 提交 创建的试卷
async function handleSubmit() {
  if (testRef.questions.length === 0 || !testRef.title) {
    ElMessage.warning("添加题目或标题")
  } else {
    const { code, msg } = await testApi.createTestPaper(testRef)
    console.log(code);
    if (code === 2000) {
      ElMessage.success(msg)
      // TODO 提交成功后，刷新界面
    }
  }



}
</script>

<template>
  <div class="create-test-container">
    <el-form :model="testRef" label-width="120px">
      <el-form-item label="试卷名称">
        <el-input v-model="testRef.title" />
      </el-form-item>
      <el-form-item label="试卷描述">
        <el-input v-model="testRef.desc" />
      </el-form-item>
      <el-form-item label="考试时间">
        <el-col :span="11">
          <el-date-picker value-format="x" v-model="testRef.start_time" type="datetime" placeholder="Pick a date"
            style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-date-picker value-format="x" v-model="testRef.stop_time" type="datetime" placeholder="Pick a date"
            style="width: 100%" />
        </el-col>
      </el-form-item>

      <el-form-item label="考试时长（分）">
        <el-button @click="testRef.exam_time_long--" type="info">-</el-button>
        <el-input style="width: 60px" v-model.number="testRef.exam_time_long" placeholder="Please input" />
        <el-button @click="testRef.exam_time_long++" type="info">+</el-button>
      </el-form-item>

      <el-form-item>
        <el-button @click="openSelectQuestionPan" type="info">添加试题</el-button>
        <el-button @click="openSelectQuestionPan" type="primary">预览</el-button>
      </el-form-item>
    </el-form>

    <el-button @click="handleSubmit" type="primary">提交</el-button>

    <el-drawer v-model="isOpen" title="添加题目面板" direction="rtl" size="50%">
      <el-table v-if="questions.length !== 0" :data="questions">
        <el-table-column property="title" label="标题" width="150" />
        <el-table-column property="score" label="分数" width="200" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleAddQuestion(scope.row.id)" type="success"
              :disabled="testRef.questions.includes(scope.row.id)">添加</el-button>
            <el-button size="small" type="danger" :disabled="!testRef.questions.includes(scope.row.id)"
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<style lang="less" scoped>
.text-center {
  text-align: center;
}
</style>